<template>
<div id="body">
  <div id="button">
    <el-button plain class="title" id="s" >myhealth</el-button>
    <el-button plain class="title" @click="diet()">饮食</el-button>
    <el-button plain class="title" @click="exercise()">BDI-II</el-button>
    <el-button plain class="title" @click="physiology()">SDS</el-button>
  </div>
  <div id="center">
   <div id="name">
    MyHealth
   </div>
   <div id="introd">
    大学生身心健康自测平台
   </div>
   <div id="watchword">
    关爱自我，了解自我，让生活更有质量。
   </div>
   <div id="BottomButton">
    <el-button plain  class="Bottom" icon="el-icon-milk-tea" @click="diet()">饮食</el-button>
    <el-button plain  class="Bottom" icon="el-icon-basketball" @click="exercise()">BDI-II</el-button>
    <el-button plain  class="Bottom" icon="el-icon-service" @click="physiology()">SDS</el-button>
   </div>
  </div>
</div>
</template>

<script>
import router from '../../router';
export default {
  name: "HomePage",
  setup() {
    const diet = ()=>{
     router.push('/diet')
    }

    const exercise = ()=>{
      router.push('/exercise')
    }

    const physiology = ()=>{
      router.push('/physiology')
    }


    return {
      diet,
      exercise,
      physiology,
    }
  }
}

</script>

<style type="text/css" scoped>
.title{
  background: none;
  border:none;
  color:cadetblue;
  font-size: 20px;
  margin:10px ;
}
#s{
  font-family: "Comic Sans MS";
  font-weight: bold;
  font-size: 30px;
}
#body{
  background:radial-gradient(200% 100% at bottom center,#f7f7b6,#e96f92,#1b2947);
  background:radial-gradient(220% 105% at top center,#1b2947 10%,#75517d 40%,#e96f92 65%,#f7f7b6);
  background-attachment:fixed;
  width:100%;
  height: 100%;
  position: absolute;
}
#button{
  margin:10px 180px 10px ;
}
#name{
  color: rgb(179,197,135);
  font-style: italic;
  font-size:60px;
  font-family: "Comic Sans MS";
  font-weight: bold;
  position:absolute;
  margin-top: -15%;
  margin-left: 8%;
}
#introd{
  color: rgb(244,222,41);
  font-size:40px;
  font-family: 华文楷体;
  position:absolute;
  margin-top: -9%;
  margin-left: 3%;
}
#watchword{
  color:yellowgreen;
  font-size:30px;
  font-family: 华文楷体;
  position:absolute;
margin-top: -4%;
margin-left: 0;

}
#BottomButton{
 margin-top: 45%;
  margin-left: 2%;
}
.Bottom{
  font-size: 20px;
  margin:15px 35px;
  border-color: peachpuff;
  border-bottom-width: 3px;
  background:none;
  font-weight: bold;
  color:peachpuff;
}
#center{
  width:50%;
  height:20%;
  margin-left: 33%;
  margin-top: 9%;

}
</style>